<template>
	<div>
		<el-container>
			<el-header class="header_style">
				<el-row>
					<el-col :span="6">
						<router-link to="/">
							<img style="margin-top: 15px" src="../assets/img/banner.png" width="30px" />
						</router-link>
					</el-col>
					<el-col style="padding-left: 20%" :span="14">
						<h3 v-text="title">}</h3>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-avatar style="margin-top: 10px; float: right; margin-right: 30px" :size="40"
							:src="loginUser.avatarUrl"></el-avatar>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-link href="/self" style="font-size: 20px; margin-top: 15px" :underline="false">我的</el-link>
						<el-link @click="logout()" style="font-size: 20px; margin-top: 15px; margin-left: 30px"
							:underline="false">退出</el-link>
					</el-col>

					<el-col :span="4" v-if="loginUser == null">
						<router-link to="/login">
							<el-button type="primary" plain style="float: right; margin-top: 10px; margin-right: 10px">
								登录</el-button>
						</router-link>
					</el-col>
				</el-row>

			</el-header>
			<el-main style="margin-top: 60px">
				<el-row>
					<el-col :span="4">&nbsp;</el-col>
					<el-col :span="16">
						<video-player v-if="showPlayer" :m3u8Url="m3u8Url" :coverImageUrl="coverImageUrl" :title="title"></video-player>
						<el-row style="margin-top: 10px; border-bottom: 1px solid #ccc">
							<el-col :span="1">
								<div @click="clickLike()" @mouseover="like_light = true" @mouseout="like_light = false">
									<svg v-show="!liked && !like_light" t="1636523801648" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="2435" width="32" height="32">
										<path
											d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4-20.5-21.5-48.1-33.4-77.9-33.4-52 0-98 35-111.8 85.1l-85.9 311h-0.3v428h472.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-0.2-12.6-2-25.1-5.6-37.1zM112 528v364c0 17.7 14.3 32 32 32h65V496h-65c-17.7 0-32 14.3-32 32z"
											p-id="2436" fill="#707070"></path>
									</svg>
									<svg v-show="liked || like_light" t="1636523801648" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="2435" width="32" height="32">
										<path
											d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4-20.5-21.5-48.1-33.4-77.9-33.4-52 0-98 35-111.8 85.1l-85.9 311h-0.3v428h472.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-0.2-12.6-2-25.1-5.6-37.1zM112 528v364c0 17.7 14.3 32 32 32h65V496h-65c-17.7 0-32 14.3-32 32z"
											p-id="2436" fill="#f4ea2a"></path>
									</svg>
								</div>
							</el-col>
							<el-col :span="2">
								<p style="margin: 0; line-height: 2.3" v-text="likeCount"></p>
							</el-col>
							<el-col :span="1">
								<div @click="clickCollect()" @mouseover="collect_light = true" @mouseout="collect_light = false">
									<svg v-show="!collected && !collect_light" t="1636523919399" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="1195" width="32" height="32">
										<path
											d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
											p-id="1196" fill="#707070"></path>
									</svg>
									<svg v-show="collected || collect_light" t="1636523919399" class="icon"
										viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
										p-id="1195" width="32" height="32">
										<path
											d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
											p-id="1196" fill="#f4ea2a"></path>
									</svg>
								</div>
							</el-col>
						</el-row>

						<!-- up主信息，视频简介 -->
						<el-row style="height: 150px">
							<el-col :span="2">
								<a :href="'/user/' + userId">
									<el-avatar style="margin-top: 30%; margin-left: 10%" :size="60"
										:src="userAvatarUrl"></el-avatar>
								</a>
							</el-col>
							<el-col :span="22">
								<h3 v-text="username"></h3>
								<p v-text="description"></p>
								<el-tag>{{ type }}</el-tag>
							</el-col>
						</el-row>

						<!-- 评论列表 -->
						<el-empty v-if="commentList.length == 0" description="没有评论哦"></el-empty>
						<div v-else>
							<comment-box v-for="comment in commentList" :key="comment.id" :avatarUrl="comment.avatarUrl"
								:username="comment.username" :comment="comment.comment"></comment-box>
						</div>
					</el-col>
					<el-col :span="4">&nbsp;</el-col>
				</el-row>

			</el-main>
			<br>
			<br>
			<br>
			<br>
			<br>
			<el-footer v-if="loginUser" style="height: 100px; backdrop-filter: blur(2px);" class="comment_publish_box">
				<el-row>
					<el-col :span="4">&nbsp;</el-col>
					<el-col :span="12">
						<el-input :rows="3" style="margin-top: 10px;" type="textarea" v-model="comment_write"
							placeholder=""></el-input>
					</el-col>
					<el-col :span="2">
						<el-button @click="publishComment()" style="margin-top: 10px; width: 100%; height: 75px" plain type="primary">发表评论
						</el-button>
					</el-col>
					<el-col :span="4">&nbsp;</el-col>
				</el-row>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	import CommentBox from '../components/CommentBox.vue'
	import VideoPlayer from '../components/VideoPlayer.vue'
	export default {
		components: {
			VideoPlayer,
			CommentBox
		},
		name: 'Video',
		data() {
			return {
				loginUser: null,
				videoId: -1,
				coverImageUrl: "",
				likeCount: 0,
				m3u8Url: "",
				title: "",
				videoOriginName: "",
				type: "",
				description: "",
				userId: -1,
				username: "",
				userAvatarUrl: "",
				duration: 0,
				comment_write: "",
				commentList: [],
				liked: false,
				collected: false,
				like_light: false,
				collect_light: false,
				pageNum: 0,
				showPlayer: false
			}
		},
		watch: {
			m3u8Url(newVal, oldVal) {
				if (newVal != '') {
					this.showPlayer = true
				}
			}
		}
		methods: {
			logout() {
				this.$axios.post('/user/logout', {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					localStorage.removeItem('bingo_username')
					localStorage.removeItem('bingo_userId')
					localStorage.removeItem('bingo_avatarUrl')
					localStorage.removeItem('bingo_description')
					localStorage.removeItem('bingo_cookie')
					location.reload()
				}).catch((err) => {
					console.log(err)
				})
			},
			loadComment() {
				var self = this
				this.$axios.post('/comment/top/' + this.videoId, {
					'page': this.pageNum++,
					'countPerPage': 10
				}).then((result) => {
					for (var i = 0; i < result.data.data.length; i++) {
						self.commentList.push(result.data.data[i])
					}
					if (result.data.data.length == 0) {
						self.pageNum--
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			clickLike() {
				if (this.loginUser == null) {
					this.$router.push('/login')
				}
				var self = this
				if (this.liked) {
					this.$axios.post('/video/dislike/' + this.videoId, {}, {
						headers: {
							'bingo_cookie': this.loginUser.bingo_cookie
						}
					}).then((result) => {
						self.likeCount = result.data.data
						self.liked = false
					}).catch((err) => {
						console.log(err)
					})
				} else {
					this.$axios.post('/video/like/' + this.videoId, {}, {
						headers: {
							'bingo_cookie': this.loginUser.bingo_cookie
						}
					}).then((result) => {
						self.likeCount = result.data.data
						self.liked = true
					}).catch((err) => {
						console.log(err)
					})
				}
			},
			clickCollect() {
				if (this.loginUser == null) {
					this.$router.push('/login')
				}
				if (this.collected) {
					this.$axios.post('/video/uncollect/' + this.videoId, {}, {
						headers: {
							'bingo_cookie': this.loginUser.bingo_cookie
						}
					}).then((result) => {
						this.collected = !this.collected
					}).catch((err) => {
						console.log(err)
					})
				} else {
					this.$axios.post('/video/collect/' + this.videoId, {}, {
						headers: {
							'bingo_cookie': this.loginUser.bingo_cookie
						}
					}).then((result) => {
						this.collected = !this.collected
					}).catch((err) => {
						console.log(err)
					})
				}
			},
			publishComment() {
				if (this.comment_write == "") {
					this.$message({
						showClose: true,
						message: "评论不能为空",
						type: 'warning'
					}) 
					return
				}

				var self = this
				this.$axios.post('/comment/level1/' + this.videoId, {
					comment: this.comment_write
				}, {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					self.commentList.unshift(result.data.data)
					self.comment_write = ""
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		mounted() {
			var self = this;
			window.addEventListener("scroll", function () {
				var scrollTop = this.document.documentElement.scrollTop;
				var scrollHeight = this.document.documentElement.scrollHeight;
				var windowHeight = this.window.innerHeight;
				if (windowHeight + scrollTop == scrollHeight) {
					self.loadComment();
				}
			})

			if (localStorage.getItem('bingo_cookie') != null) {
				this.loginUser = {
					id: localStorage.getItem('bingo_userId'),
					username: localStorage.getItem('bingo_username'),
					avatarUrl: localStorage.getItem('bingo_avatarUrl'),
					description: localStorage.getItem('bingo_description'),
					bingo_cookie: localStorage.getItem('bingo_cookie')
				}
			}

			this.videoId = this.$route.params['videoId']
			var self = this
			this.$axios.get('/video/info/' + this.videoId).then((result) => {
				self.coverImageUrl = result.data.data.coverImageUrl
				self.likeCount = result.data.data.likeCount
				self.m3u8Url = result.data.data.m3u8Url
				self.title = result.data.data.title
				self.videoOriginName = result.data.data.videoOriginName
				self.type = result.data.data.type
				self.description = result.data.data.description
				self.userId = result.data.data.userId
				self.username = result.data.data.username
				self.userAvatarUrl = result.data.data.userAvatarUrl
				self.duration = result.data.data.duration
			}).catch((err) => {
				console.log(err)
			})

			this.loadComment()

			if (this.loginUser != null) {
				this.$axios.get('/video/liked/' + this.videoId, {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					if (result.data.data == 1) {
						self.liked = true
					}
				}).catch((err) => {
					console.log(err)
				})
				this.$axios.get('/video/collected/' + this.videoId, {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					if (result.data.data == 1) {
						self.collected = true
					}
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		destroyed() {
			window.addEventListener("scroll", function () {})
		},
	}
</script>

<style scoped>
	.header_style {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 30px;
		width: 99%;
		position: fixed;
		background: rgba(255, 255, 255, .5);
		z-index: 10;
		margin-left: auto;
		margin-right: auto;
		backdrop-filter: blur(6px);
	}

	.comment_publish_box {
		background-color: rgba(255, 255, 255, .6);
		position: fixed;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		width: 99%;
		bottom: 20px;
	}
</style>